package myJs.cps

import myJs.myPkg.reactHookForm._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.scalajs.js

/**
 * Created by yz on 3/11/2020
 */
@react object InputInlinePasswordCp {

  case class Props(
                    useForm: UseFormRT,
                    name: String,
                    registerOptions: RegisterOptions = RegisterOptions(),
                    onChange: js.UndefOr[String => Unit] = js.undefined,
                    value: String,
                    label: String,
                    labelWidth: Int = 2,
                    inputWidth: Int = 4,
                    readOnly: Boolean = false,
                    placeHolder: String = "",
                  )

  val component = FunctionalComponent[Props] { props =>

    val hasErrorCls = if (props.useForm.formState.errors.isDefinedAt(props.name)) "has-error" else ""

    div(className := s"form-group ${hasErrorCls}",
      label(className := s"control-label col-sm-${props.labelWidth}", s"${props.label}:"),
      div(className := "col-sm-3",
        div(className := "input-group",
          span(className := "input-group-addon",
            em(style := Style(fontSize = 20, width = 24, minWidth = 24), className := "fa fa-key icon2x")
          ),
          PureInputCp(useForm = props.useForm, name = s"${props.name}", placeHolder = props.placeHolder,
            `type` = "password", registerOptions = props.registerOptions, onChange = props.onChange,
            value = props.value, readOnly = props.readOnly, showValidate = false
          )
        ),
        if (props.useForm.formState.errors.isDefinedAt(props.name)) {
          small(className := "help-block", props.useForm.formState.errors(props.name).message)
        } else null

      )
    )


  }

}



